import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from '../../components/Icon';
import { colors } from '../../styles';

import tabNavigationData from './tabNavigationData';

const Tab = createBottomTabNavigator();

export default function BottomTabs() {
  return (
    <Tab.Navigator
      screenOptions={() => ({
        tabBarActiveTintColor: colors.primary,
      })}
    >
      {tabNavigationData.map((item, idx) => (
        <Tab.Screen
          key={`tab_item${idx + 1}`}
          name={item.name}
          component={item.component}
          options={{
            headerShown: false,
            tabBarIcon: ({ focused, color, size }) => (
              <Icon name={item.icon} color={color} size={size} />
            ),
            title: item.title,
            ...(item.hideTabBar && {
              tabBarStyle: { display: 'none' },
            }),
          }}
        />
      ))}
    </Tab.Navigator>
  );
}
